<template>
  <div class="res-banner">
    <div class="res-main">
      <div class="login-banner-bg"><span></span><img src="@/assets/images/act2.png"/></div>
      <div class="login-box">
        <h3 class="title">账号注册</h3>
        <div class="clear"></div>
        <!--        <div class="regist-form">

                </div>-->
        <div class="regist-form">
          <el-form :model="userForm" status-icon :rules="rules" ref="userForm">
            <el-form-item prop="account">
              <el-input placeholder="邮箱/手机/用户名" v-model="userForm.account"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" placeholder="密码" v-model="userForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="checkPass">
              <el-input type="password" placeholder="确认密码" v-model="userForm.checkPass" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="login-links">
          <label for="reader-me">
            <input id="reader-me" type="checkbox" v-model="userForm.agree" value="12321"> 点击表示您同意商城《服务协议》
          </label>

        </div>
        <div class="am-cf">
          <input type="submit" name="" value="注 册" class="am-btn am-btn-primary am-btn-sm"
                 @click="register('userForm')">
        </div>
        <div class="am-cf">
          <input type="submit" name="" value="重 置" class="am-btn am-btn-default am-btn-sm"
                 @click="resetForm('userForm')">
        </div>

      </div>
    </div>
  </div>


</template>

<script>
export default {
  name: "RegisterMain",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else if (value.length > 10) {
        callback(new Error('不能大于10个字符'));
      } else {
        if (this.userForm.checkPass !== '') {
          this.$refs.userForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.userForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else if (value.length > 20) {
        callback(new Error('不能大于20个字符'));
      } else if (value.length <6) {
        callback(new Error('不能小于6个字符'));
      }else {
        callback();
      }
    };
    return {
      dialogVisible: false,
      userForm: {
        account: '',
        password: '',
        checkPass: '',
        agree: ''
      },
      rules: {
        account: [
          {required: true, message: '请输入邮箱/手机/用户名', trigger: 'blur'},
          {max: 10, message: '不能大于10个字符', trigger: 'blur'}
        ],
        password: [
          {validator: validatePass, trigger: 'blur'}
        ],
        checkPass: [
          {validator: validatePass2, trigger: 'blur'}
        ],

      }
    }
  },
  methods: {
    //注册方法
    register(formName) {

      //进行表单校验
      this.$refs[formName].validate((valid) => {
        //校验成功进行登录
        if (valid) {
          //校验是否勾选注册协议
          if (this.userForm.agree != true) {
            this.$alert('请勾选商城服务协议!', '注意事项!', {
              confirmButtonText: '确定'
            });
            return;
          }
          this.$store.dispatch('register', this.userForm).then(() => {
            this.$message({message: '注册成功!', type: 'success', showClose: true})
            setTimeout(() => {
              this.$router.push({path: '/login'})
            }, 3000)

          })
        } else {
          return false;
        }

      })

    },


    //重置表单的方法
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.userForm.agree = false;
    }
  },
  created() {
    this.$message({message:'欢迎注册!',type:'success'})
  }

}
</script>

<style scoped>


img {
  display: block;
  width: 400px;
}

.res-banner {
  margin-top: 30px;
}
</style>